<template>
  <context-menu
    :content="message"
    :menu-list="ChatImageOrFileMenu"
    @select="(event, MenuItem) => MenuItem.click(event, message)"
  >
    <div :class="IsSelf" class="text-wrap text-base break-words overflow-wrap p-3 cursor-pointer">
      <Image :src="message.fileUrl!" @click="PreviewImage(message)" />
      <div>{{ message.content }}</div>
    </div>
  </context-menu>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { IMessage } from "@/types/chat";
import { useUser } from "@/store/modules/user";
import { useChatMenu } from "@/hooks/useMenu.ts";
import Image from "@/components/Image/index.vue";
import ContextMenu from "@/components/ContextMenu/index.vue";

const { ChatImageOrFileMenu } = useChatMenu();
const user = useUser();
const props = withDefaults(
  defineProps<{
    message: IMessage;
  }>(),
  {},
);
const IsSelf = computed<string>(() => {
  if (user.userId === props.message.sendId) return "bg-ChatMe";
  return "bg-ChatOther";
});

function PreviewImage(message: IMessage) {
  window.electronApi.createWindow({
    title: "previewImage",
    path: "preview?url=" + message.fileUrl + "&name=" + message.fileName,
    width: 800,
    height: 600,
  });
}
</script>

<style lang="scss" scoped></style>
